/*
 * @Author: yuanxiang 
 * @Date: 2018-06-27 09:03:01 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-11-21 15:45:08
 */
<template>
  <div class="cyy_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
        <div slot="main" class="bestrideAreaShop">
            <div class="map">
              <city-baidu-map></city-baidu-map>
            </div>
            <div class="dataDisplay">
                <top-logo-title>
                    <div slot="topTitle">浩德速运数据</div>
                </top-logo-title>
                <div class="chart">
                  <!-- 同城速运 -->
                    <div class="leftView">
                        <div class="headTitle">同城速运</div>
                        <table border="1" cellspacing="0" width="100%">
                          <tr class="title">
                            <th>名称</th>
                            <th>当日收/发</th>
                          </tr>
                          <tr v-for="(item,index) in sendReceiveData.slice(0,4)" :key="index">
                            <td class="depot">{{item.name}}</td>
                            <td class="dayReceive">{{item.list[0].value}}/{{item.list[1].value}}</td>
                          </tr>
                        </table>
                        <div class="botList">
                          <div class="client">
                            <div class="img"></div>
                            <p> <span>客户数</span> <span>{{totalData.sumPlatformUserCount}}</span> </p>
                          </div>
                          <div class="car">
                            <div class="img"></div>
                            <p> <span>车辆数</span> <span>{{totalData.carsNum}}</span> </p>
                          </div>
                          <div class="transport">
                            <div class="img"></div>
                            <p> <span>运输能力</span> <span>{{totalData.capacity}}</span> </p>
                          </div>
                        </div>
                    </div>
                    <div class="centerView">
                      <div class="collect">
                        <img src="../../../../../static/img/cyy/cyy_ico5.png" alt="">
                        <p> <span>今日收件量</span> <span>{{totalData.todayReceivingAmount}}</span> </p>
                      </div>
                      <div class="hair">
                        <img src="../../../../../static/img/cyy/cyy_ico6.png" alt="">
                        <p> <span>今日发件量</span> <span>{{totalData.todaysendingAmount}}</span> </p>
                      </div>
                    </div>
                    <div class="rightView">
                      <div class="topView">
                        <div class="headerBoxTop">
                          <span class="headerTitle">平台业务类型及收发时效</span>
                        </div>
                        <div class="contentBoxTop">
                          <pie-chart v-model="contentArr" @pieChangeCount="changePie" :option="contentOption"></pie-chart>
                          <half-pie-chart v-model="userCount"></half-pie-chart>
                        </div>
                      </div>
                      <div class="botView">
                        <div class="headerBoxBottom">
                          <span class="headerTitle">各网点营业收入额</span>
                        </div>
                        <div class="contentBoxBottom">
                          <div class="left">
                            <img src="../../../../../static/img/cyy/cyy_ico4.png" />
                            <p>￥{{Math.round(totalData.sumOrderAmount)}}</p>
                          </div>
                          <ul class="right">
                            <li> <span>关林站</span> <span>￥{{Math.round(networkData.guanLinStation)}}</span> </li>
                            <li> <span>涧西站</span> <span>￥{{Math.round(networkData.jianXiStation)}}</span> </li>
                            <li> <span>老城站</span> <span>￥{{Math.round(networkData.laoChengStation)}}</span> </li>
                            <li> <span>云仓站</span> <span>￥{{Math.round(networkData.yunCangStation)}}</span> </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                      <div class="bottomView">
                        <div class="leftBottomBox">
                          <div class="headerBox">
                            <span class="headerTitle">实时监控</span>
                          </div>
                          <div class="ratio">
                            <div class="title">仓库使用占比</div>
                            <div class="contentBox">
                              <div class="item oneItem">
                                <el-progress type="circle" :percentage="68" color="#ffab91" stroke-width="10"></el-progress>
                                <p>关林站</p>
                              </div>
                              <div class="item twoItem">
                                <el-progress type="circle" :percentage="65" color="#a391ff" stroke-width="10"></el-progress>
                                <p>涧西站</p>
                              </div>
                              <div class="item threeItem">
                                <el-progress type="circle" :percentage="77" color="#29cdcb" stroke-width="10"></el-progress>
                                <p>老城站</p>
                              </div>
                              <div class="item fourItem">
                                <el-progress type="circle" :percentage="56" color="#0baffb" stroke-width="10"></el-progress>
                                <p>云仓站</p>
                              </div>
                            </div>
                          </div>
                          <div class="controlCar">
                            <div class="title">可支配车辆</div>
                            <div class="btnList">
                              <p>41</p>
                              <p>48</p>
                              <p>37</p>
                              <p>62</p>
                            </div>
                          </div>
                        </div>
                        <div class="rightBottomBox">
                          <div class="headerBox">
                            <span class="headerTitle">月收发单趋势</span>
                          </div>
                          <div class="contentBox">
                            <bar-line-charts v-model="issuanceOfQuantity" :option="tradeTrendOption" :chartStyle="'min-height:230px;height:280px;'"></bar-line-charts>
                          </div>
                        </div>
                      </div>
                </div>
            </div>
         </div>
    </bg-lay-out>
  </div>
</template>
<script>
import topLogoTitle from "@/components/cyy/topLogoTitle";
import mainTitle from "@/components/cyy/mainTitle";
import lineChart from "@/components/Charts/lineChart";
import barChart from "@/components/Charts/barChart";
import ICountUp from "vue-countup-v2";
import barLineCharts from "@/components/Charts/barLineCharts";
import bgLayOut from "@/components/bgLayOut/index";
import liquidfillChart from "@/components/Charts/liquidfillChart.vue";
import cityBaiduMap from "@/components/cyy/cityBaiduMap.vue";
import pieChart from "@/components/Charts/pieChart.vue";
import halfPieChart from "./halfPieChart.vue";
import {
  GetDataProfileInfoForHousing,
  GetDataByTargetForTwo,
  GetDoubleDetailList,
  GetDataByDoubleTarget
} from "@/api/cyy/IndustrialPark";
export default {
  name: "sellAnalysis",
  components: {
    topLogoTitle,
    mainTitle,
    barLineCharts,
    ICountUp,
    bgLayOut,
    lineChart,
    liquidfillChart,
    barChart,
    cityBaiduMap,
    pieChart,
    halfPieChart
  },
  data() {
    return {
      userCount: Number,
      totalData: {}, // 总数据
      contentArr: [], // 平台业务类型
      networkData: {}, // 网点数据
      sendReceiveData: [], // 各网点当日收发量
      contentOption: {
        circulation: true,
        legend: {
          bottom: "20%"
        },
        radius: "50%",
        hidePieMargin: true,
        showLabel: true,
        hoverPosion: "inside",
        labelFormatter: "{c}",
        color: ["#29cdcb", "#d53b9d", "#8871fe"]
      },
      issuanceOfQuantity: [], // 发单量趋势
      tradeTrendOption: {
        legend: {
          show: true
        },
        barWidth: 30,
        noSmooth: true,
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        grid: {
          left: "7%",
          bottom: "30%"
        },
        unit: [" 件", " 件"]
      }
    };
  },
  mounted() {
    this.fechData();
  },
  methods: {
    changePie(res) {
      var data = this.contentArr[res].percent;
      this.$set(this, "userCount", data);
    },
    fechData() {
      this.getTotalData();
      this.getContentArrData();
      this.getNetworkData();
      this.getSendReceiveData();
      this.getYearSendReceiveData();
      this.setData();
    },
    // 获取页面总数据
    async getTotalData() {
      const res = await GetDataProfileInfoForHousing();
      if (res.data.code === "0") {
        this.$set(this, "totalData", res.data.result);
      }
    },
    // 获取平台业务类型数据
    async getContentArrData() {
      const p = {
        queryType: "28007"
      };
      const res = await GetDataByTargetForTwo(p);
      if (res.data.code === "0") {
        this.$set(this, "contentArr", res.data.result);
      }
    },
    // 获取网点金额数据
    async getNetworkData() {
      const p = {
        queryType: "28008"
      };
      const res = await GetDataByTargetForTwo(p);
      if (res.data.code === "0") {
        this.$set(this, "networkData", res.data.result);
      }
    },
    // 获取各网点当日收发量数据
    async getSendReceiveData() {
      const p = {
        // statisticalTime: "2018-07-20",
        queryType: "28002"
      };
      const res = await GetDataByDoubleTarget(p);
      if (res.data.code === "0") {
        this.$set(this, "sendReceiveData", res.data.result);
      }
    },
    // 获取各网点年度收发量数据
    async getYearSendReceiveData() {
      const q = {
        queryType: "28002",
        timeType: "3010"
      };
      const res = await GetDoubleDetailList(q);
      if (res.data.code === "0") {
        var issuanceOfQuantity = [
          {
            name: "收件量",
            type: "bar",
            option: {},
            value: []
          },
          {
            name: "发件量",
            type: "line",
            option: {},
            value: []
          }
        ];
        res.data.result.forEach(element => {
          var item1 = {
            name: element.xData1,
            value: element.list[0].value
          };
          var item2 = {
            name: element.xData1,
            value: element.list[1].value
          };
          issuanceOfQuantity[0].value.push(item2);
          issuanceOfQuantity[1].value.push(item1);
        });
        this.$set(this, "issuanceOfQuantity", issuanceOfQuantity);
      }
    },
    setData() {
      $(".el-progress-circle__track").css("stroke", "rgb(30,30,30)");
      $(".el-progress__text").css("color", "#fff");
      $(".el-progress__text").css("font-size", "20px");
      // var issuanceOfQuantity = [
      //   {
      //     name: "收件量",
      //     type: "bar",
      //     option: {},
      //     value: [
      //       {
      //         name: "1月份",
      //         value: 105
      //       },
      //       {
      //         name: "2月份",
      //         value: 310
      //       },
      //       {
      //         name: "3月份",
      //         value: 245
      //       },
      //       {
      //         name: "4月份",
      //         value: 137
      //       },
      //       {
      //         name: "5月份",
      //         value: 289
      //       },
      //       {
      //         name: "6月份",
      //         value: 308
      //       }
      //     ]
      //   },
      //   {
      //     name: "发件量",
      //     type: "line",
      //     option: {},
      //     value: [
      //       {
      //         name: "1月份",
      //         value: 75
      //       },
      //       {
      //         name: "2月份",
      //         value: 285
      //       },
      //       {
      //         name: "3月份",
      //         value: 270
      //       },
      //       {
      //         name: "4月份",
      //         value: 40
      //       },
      //       {
      //         name: "5月份",
      //         value: 185
      //       },
      //       {
      //         name: "6月份",
      //         value: 25
      //       }
      //     ]
      //   }
      // ];
      // this.$set(this, "issuanceOfQuantity", issuanceOfQuantity);
      // var contentArr = [
      //   {
      //     name: "同城",
      //     value: "40"
      //   },
      //   {
      //     name: "省内",
      //     value: "40"
      //   },
      //   {
      //     name: "省外",
      //     value: "20"
      //   }
      // ];
      // this.$set(this, "contentArr", contentArr);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";

.bestrideAreaShop {
  .map {
    @include absoluteAllSides(110, 0, 0, 0, 1);
    // 地图
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);
    & .chart {
      @include absoluteAllSides(120, 40, 11, 75, 1);
      .leftView {
        position: absolute;
        top: 0;
        left: 0px;
        width: 247px;
        height: calc(100% - 344px - 10px);
        background: rgba(#000, 0.2);
        .headTitle {
          height: 75px;
          line-height: 75px;
          color: #22ac38;
          font-size: 26px;
          text-align: center;
        }
        table {
          table-layout: fixed;
          border: 1px solid #22ac38;
          font-size: 20px;
          color: #22ac38;
          tr {
            height: 55px;
            text-align: center;
            th,
            td {
              font-weight: normal;
            }
          }
          & .title {
            font-size: 20px;
          }
          & .depot {
            color: #fff;
            font-size: 20px;
          }
          & .dayReceive {
            color: #22ac38;
            font-size: 20px;
          }
        }
        .botList {
          p {
            display: flex;
            flex-direction: column;
            text-align: right;
            span:nth-of-type(1) {
              color: #969696;
              font-size: 16px;
            }
            span:nth-of-type(2) {
              color: #22ac38;
              font-size: 24px;
            }
          }
          .img {
            width: 44px;
            height: 44px;
          }
          .client {
            @include flex-ic-jsa;
            margin-top: 20px;
            & .img {
              background: url("../../../../../static/img/cyy/cyy_ico1.png") left
                top no-repeat;
              background-size: contain;
            }
          }
          .car {
            @include flex-ic-jsa;
            margin-top: 20px;
            & .img {
              background: url("../../../../../static/img/cyy/cyy_ico3.png") left
                top no-repeat;
              background-size: contain;
            }
          }
          .transport {
            @include flex-ic-jsa;
            margin-top: 20px;
            & .img {
              background: url("../../../../../static/img/cyy/cyy_ico2.png") left
                top no-repeat;
              background-size: contain;
            }
          }
        }
      }
    }
  }
  .centerView {
    position: absolute;
    top: 130px;
    left: 280px;
    p {
      display: flex;
      flex-direction: column;
    }
    p span:nth-of-type(1) {
      color: #fff;
      font-size: 24px;
    }
    p span:nth-of-type(2) {
      color: #f8ab22;
      @include din(72px);
    }
    .collect {
      display: flex;
      img {
        width: 86px;
        height: 101px;
        margin-top: 20px;
        margin-right: 40px;
      }
    }
    .hair {
      display: flex;
      margin-top: 80px;
      img {
        width: 101px;
        height: 96px;
        margin-top: 20px;
        margin-right: 20px;
      }
    }
  }
  .rightView {
    position: absolute;
    top: 0;
    right: 0px;
    width: 521px;
    height: calc(100% - 344px - 10px);
    background: rgba(#000, 0.2);
    .topView {
      height: calc(100% / 2);
      .contentBoxTop {
        display: flex;
        justify-content: space-between;
      }
      .headerBoxTop {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #682b24;
        .headerTitle {
          font-size: 18px;
          color: #fa6b5b;
          position: relative;
          margin-left: 20px;
          &::before {
            content: "";
            height: 3px;
            width: 210px;
            position: absolute;
            left: -10px;
            bottom: -14px;
            border-radius: 2px;
            background: #fa6b5b;
          }
        }
      }
    }
    .botView {
      height: calc(100% / 2);
      .headerBoxBottom {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(245, 191, 72, 0.43);
        .headerTitle {
          font-size: 18px;
          color: #f5bf48;
          position: relative;
          margin-left: 20px;
          &::before {
            content: "";
            height: 3px;
            width: 160px;
            position: absolute;
            left: -10px;
            bottom: -14px;
            border-radius: 2px;
            background: #f5bf48;
          }
        }
      }
      .contentBoxBottom {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 20px;
        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          & img {
            width: 156px;
            height: 156px;
            margin: auto;
          }
          & p {
            margin-top: 10px;
            color: #f5bf48;
            font-size: 36px;
          }
        }
        .right {
          li {
            display: flex;
            align-items: center;
            height: 50px;
          }
          li span:nth-of-type(1) {
            margin-right: 35px;
            color: #fff;
            font-size: 16px;
          }
          li span:nth-of-type(2) {
            color: #907f59;
            font-size: 24px;
          }
        }
      }
    }
  }
  .bottomView {
    .leftBottomBox {
      position: absolute;
      bottom: 0;
      left: 0px;
      width: calc(100% / 2 - 5px);
      height: 344px;
      background: rgba($color: #000000, $alpha: 0.3);
      .headerBox {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e82079;
      }
      .headerTitle {
        font-size: 24px;
        color: #e82079;
        position: relative;
        margin-left: 20px;
      }
      .headerTitle::before {
        content: "";
        height: 3px;
        width: 180px;
        position: absolute;
        left: -10px;
        bottom: -14px;
        border-radius: 2px;
        background: #e82079;
      }
      .el-progress--circle {
        position: relative;
      }
      .el-.el-progress--circle .el-progress__text {
        color: #fff;
        font-size: 20px;
      }
      .el-progress--circle::before {
        content: "";
        position: absolute;
        width: 70%;
        height: 70%;
        border-radius: 50%;
        top: 15%;
        left: 15%;
      }
      .ratio {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 36px;
        .title {
          margin-left: 32px;
          color: #ff2165;
          font-size: 16px;
        }
        .contentBox {
          flex-grow: 1;
          flex-basis: 0;
          flex-shrink: 1;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .item {
            height: 70%;
            p {
              margin-top: 10px;
              color: #fff;
              font-size: 16px;
              text-align: center;
            }
          }
          .oneItem {
            .el-progress--circle::before {
              background: #ffab91;
            }
          }
          .twoItem {
            .el-progress--circle::before {
              background: #a391ff;
            }
          }
          .threeItem {
            .el-progress--circle::before {
              background: #29cdcb;
            }
          }
          .fourItem {
            .el-progress--circle::before {
              background: #0baffb;
            }
          }
        }
      }
      .controlCar {
        @include flex-ic-jsa;
        margin-top: 16px;
        .title {
          margin-left: 32px;
          color: #ff2165;
          font-size: 16px;
        }
        .btnList {
          flex-grow: 1;
          flex-basis: 0;
          flex-shrink: 1;
          @include flex-ic-jsa;
          margin-left: 20px;
          p {
            width: 123px;
            height: 30px;
            color: #fff;
            font-size: 20px;
            text-align: center;
            border-radius: 5px;
          }
          p:nth-of-type(1) {
            background-color: #ffab91;
          }
          p:nth-of-type(2) {
            background-color: #a391ff;
          }
          p:nth-of-type(3) {
            background-color: #29cdcb;
          }
          p:nth-of-type(4) {
            background-color: #0baffb;
          }
        }
      }
    }
    .rightBottomBox {
      position: absolute;
      bottom: 0;
      right: 0px;
      width: calc(100% / 2 - 5px);
      height: 344px;
      background: rgba(#000, 0.2);
      .headerBox {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #00455f;
      }
      .headerTitle {
        font-size: 24px;
        color: #49dbff;
        position: relative;
        margin-left: 20px;
      }
      .headerTitle::before {
        content: "";
        height: 3px;
        width: 220px;
        position: absolute;
        left: -10px;
        bottom: -14px;
        border-radius: 2px;
        background: #49dbff;
      }
    }
  }
}
</style>